<template>
  <div class="header">
    <el-row>
      <el-col :span="12">
        <img class="top-img" @click="goHome" src="../../assets/images/01.png">
        <div class="font-right" @click="goHome">
          <p class="chinese">WPS管理工具</p>
          <p class="english">
            <span>W</span>ork &nbsp;
            <span>P</span>lan &nbsp;
            <span>M</span>anager
          </p>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="gird-content">
          <span class="user-name"> <i class="el-icon-user"></i> {{userMsg}} </span>
          <el-button type="primary"  size="mini" class="out-login" v-if="isout" @click="outLogin">
            <i class="el-icon-switch-button"></i> 退出登录
          </el-button>
          <el-button class="back-btn" size="mini" v-else @click="goBack">
            <i class="el-icon-arrow-left"></i> 返回
          </el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getUsername, goBack } from "@/config/myUtil";
export default {
  name: "HeaderTop",
  props:{
    isout:{
      type:Boolean,
      default:false
    }
  },
  computed:{
    userMsg(){
      return getUsername(this.$store.state.userMsg)
    }
  },
  methods: {
    goHome() {
      this.$router.push({ name: "menu" });
    },
    goBack() {
      goBack();
    },
    outLogin() {
      this.$confirm("您确定要退出登录?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          REMOVELOGINMSG();
          this.$router.replace({ name: "login", query: { redirect: "menu" } });
        })
        .catch(() => {});
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../less/headerTop.less");
</style>
